<template>
  <div
    v-if="item.type != 'checkbox' && item.type != 'radio' && item.type != 'div'"
    ref="div1"
    class="definedForm"
    @click.self="(event) => onSelected(event.target, item)"
  >
    <label :for="item.id">{{ item.label || "标签：" }}</label>
    <textarea v-if="item.type == 'textarea'" />
    <select v-else-if="item.type == 'select'">
      <option v-for="(obj, index) in item.options" :key="index">{{ obj || "" }}</option>
    </select>
    <input
      v-else
      :id="item.id"
      :name="item.name"
      :type="item.type"
      placeholder="请在此处输入内容"
      :value="item.value || ''"
      read-only="item.readonly"
    />
  </div>
  <div
    v-else-if="item.type == 'div'"
    class="definedForm"
    @click.self="(event) => onSelected(event.target, item)"
  >
    <div v-for="(child, index) in item.children" :key="index">
      <slot :item="child" name="item"></slot>
    </div>
  </div>
  <div v-else class="definedForm" @click.self="(event) => onSelected(event.target, item)">
    <input
      :id="item.id"
      style="vertical-align: middle; margin: 3px"
      :type="item.type"
      name="checkbox"
    />
    <label style="vertical-align: middle" :for="item.id">{{
      item.label || "标签："
    }}</label>
  </div>
</template>

<script>
// import { CSS } from "./style/styleEnv";

export default {
  name: "DragControl",
  emits: ["elementSelected"],
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  methods: {
    onSelected(target, item) {
      this.$emit("elementSelected", { target, item });
    },
  },
};
</script>

<!-- <style scoped lang="stylus" type="text/stylus">
@import "{CSS}.styl"; 
</style> -->

<style scoped>
/* @import "./style/basic-grey.css";*/
/* @import "./style/smart-green.css";*/
@import "@/assets/style/bootstrap-frm.css";
.form-input {
  padding: 0 10px;
  width: 95%;
}
</style>
